<template>
	<div @mouseenter="stopSwiper" @mouseleave="continueSwiper" class="bannerList position-relative mt-2 rounded-7 overflow-hidden">
		<div
			class="changeBannerIcon cursor-pointer position-absolute top-50 translate-middle-y rounded-circle d-flex justify-content-center align-items-center"
			@click="changeBanner('pre')"
		>
			<ArrowLeftIcon width="12" height="12" />
		</div>
		<div
			class="changeBannerIcon cursor-pointer position-absolute top-50 translate-middle-y rounded-circle d-flex justify-content-center align-items-center"
			@click="changeBanner('next')"
		>
			<ArrowRightIcon width="12" height="12" />
		</div>

		<div
			class="bannerItem position-absolute rounded rounded-7"
			:class="{
				firstBanner: bannerIndex === currentActiveIndex,
				secondBanner: bannerIndex === getSecondBanerIndex,
				lastBanner: bannerIndex === getLastBannerIndex,
				'cursor-pointer': currentActiveIndex === bannerIndex,
			}"
			:style="{
				backgroundImage: `url(${banner.imageUrl})`,
			}"
			v-for="(banner, bannerIndex) in banners"
			:key="bannerIndex"
			@click="
				handleBannerRoute(banner, bannerIndex);
				bannerIndex === getSecondBanerIndex
					? (currentActiveIndex = getSecondBanerIndex)
					: bannerIndex === getLastBannerIndex
					? (currentActiveIndex = getLastBannerIndex)
					: false;
			"
		>
			<div class="bannerTag position-absolute end-0 bottom-0 px-3 py-1">
				{{ getTagText(banner.targetType) }}
			</div>
		</div>
	</div>
	<div class="w-100 d-flex justify-content-center mt-3" @mouseleave="continueSwiper">
		<span
			v-for="(dot, dotIndex) in banners"
			:key="dotIndex"
			class="swiperDot rounded-circle"
			:class="{
				'ms-3': dotIndex !== 0,
				activeSwiperDot: currentActiveIndex === dotIndex,
			}"
			@mouseenter="
				mouseenterSwiperDot(dotIndex);
				stopSwiper();
			"
		></span>
	</div>
	<div class="d-flex align-items-center fs-4 fw-bold my-2 pb-2 cursor-pointer">
		<span class="me-1">推荐歌单</span>
		<ArrowRightWeight1Icon width="22" height="22" color="#000" />
	</div>

	<div class="recommendList px-1 py-2 d-flex justify-content-between flex-wrap">
		<DailyRecommendSquare
			@onClickCover="$router.push('/container/dailyRec')"
			@onClickPlay="$router.push({ path: '/container/dailyRec', query: { immediate: true } })"
		/>

		<SongListSquare
			class="mb-4"
			v-for="(rec, recIndex) in personalizedList"
			:key="recIndex"
			@onClickCover="$router.push({ path: '/container/createdMusicList', query: { id: rec.id } })"
			@onClickPlay="$router.push({ path: '/container/createdMusicList', query: { id: rec.id, immediate: true } })"
			:picUrl="rec.picUrl"
			:name="rec.name"
			:playCount="rec.playCount"
			playTranslate="-15%"
		/>
	</div>

	<div class="d-flex align-items-center fs-4 fw-bold my-2 pb-2 cursor-pointer">
		<span class="me-1">独家放送</span>
		<ArrowRightWeight1Icon width="22" height="22" color="#000" />
	</div>

	<div class="d-flex justify-content-between">
		<div
			v-for="(item, index) in privateContentList"
			:key="index"
			class="position-relative"
			style="padding-left: 23%; padding-top: 18%;rounded-2;"
			@click="$router.push({ name: 'videoDetail', query: { videoId: item.id } })"
		>
			<div class="position-absolute w-100 h-100 start-0 top-0 d-flex flex-column justify-content-between">
				<div class="position-absolute start-0 top-0 m-2 rounded-circle playOutlinedIcon flex-center cursor-pointer">
					<PlayThickOutlinedIcon width="15" height="15" class="iconInner" />
				</div>
				<img class="w-100 rounded-5 cursor-pointer" :src="item.sPicUrl" alt="" />
				<div class="privateContentName mt-2 cursor-pointer fs-5">{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "vue";
import { getBanners, getPersonalizedApi, getPrivateContentlistApi } from "@/api/discover";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getSongDetailApi } from "@/api/song";
export default defineComponent({
	setup() {
		const router = useRouter();
		const store = useStore();
		const state = reactive({
			banners: [],
			personalizedList: [],
			currentActiveIndex: 0,
			privateContentList: [],
		});
		//获取轮播
		const getBanners_com = () => {
			return new Promise((resolve, reject) => {
				getBanners({ type: 0 }).then((res: any) => {
					if (res.code === 200) {
						state.banners = res.banners;
						resolve(res.banners);
					} else {
						reject();
					}
				});
			});
		};
		getBanners_com();
		//开始轮播
		let swiperTimer = null;
		const startSwiper = () => {
			swiperTimer = setInterval(() => {
				if (state.currentActiveIndex < state.banners.length - 1) {
					state.currentActiveIndex++;
				} else {
					state.currentActiveIndex = 0;
				}
			}, 5000);
		};
		startSwiper();
		const getPersonalized = () => {
			getPersonalizedApi({ limit: 9 }).then((res: any) => {
				if (res.code === 200) {
					state.personalizedList = res.result.slice(0, 9);
				}
			});
		};
		getPersonalized();
		const getLastBannerIndex = computed(() => {
			if (state.currentActiveIndex === 0) {
				return state.banners.length - 1;
			} else {
				return state.currentActiveIndex - 1;
			}
		});
		const getSecondBanerIndex = computed(() => {
			if (state.currentActiveIndex === state.banners.length - 1) {
				return 0;
			} else {
				return state.currentActiveIndex + 1;
			}
		});
		const changeBanner = (tag) => {
			if (tag === "pre") {
				state.currentActiveIndex = state.currentActiveIndex === 0 ? state.banners.length - 1 : state.currentActiveIndex - 1;
			} else if (tag === "next") {
				state.currentActiveIndex = state.currentActiveIndex === state.banners.length - 1 ? 0 : state.currentActiveIndex + 1;
			}
		};
		const stopSwiper = () => {
			clearInterval(swiperTimer);
			swiperTimer = null;
		};
		const continueSwiper = () => {
			if (swiperTimer) {
				clearInterval(swiperTimer);
				swiperTimer = null;
			}
			startSwiper();
		};
		const mouseenterSwiperDot = (dotIndex) => {
			state.currentActiveIndex = dotIndex;
		};
		const handleBannerRoute = (banner, bannerIndex) => {
			if (bannerIndex === state.currentActiveIndex) {
				switch (banner.targetType) {
					case 1:
						getSongDetailApi([banner.targetId]).then((res: any) => {
							if (res.code === 200 && res.songs?.length) {
								store.commit("changeCurrentMusicDetail", res.songs[0]);
								store.dispatch("getCurrentMusicUrlInfo", { id: banner.targetId });
							}
						});
						break;
					case 10:
						router.push({ path: "/container/albumDetail", query: { id: banner.targetId } });
						break;
				}
			}
		};
		const getPrivateContent = () => {
			getPrivateContentlistApi({ limit: 4 }).then((res: any) => {
				state.privateContentList = res.result;
			});
		};
		getPrivateContent();
		const getTagText = (targetType) => {
			switch (targetType) {
				case 1:
					return "新歌首发";
				case 10:
					return "新碟首发";
			}
		};
		return {
			...toRefs(state),
			getLastBannerIndex,
			getSecondBanerIndex,
			changeBanner,
			stopSwiper,
			continueSwiper,
			mouseenterSwiperDot,
			handleBannerRoute,
			getPrivateContent,
			getTagText,
		};
	},
});
</script>

<style lang="scss" scoped>
.bannerList {
	width: 100%;
	$bannerListHeight: calc(400 * 1px * 0.5);
	height: $bannerListHeight;
	.bannerItem {
		$width: calc(1080 * 1px * 0.3);
		$height: calc(400 * 1px * 0.3);
		left: calc(50% - #{$width}/ 2);
		top: calc(50% - #{$height} / 2);
		width: $width;
		height: $height;
		background-repeat: no-repeat;
		background-size: cover;
		transition: all ease 0.6s;
		z-index: 1;
		.bannerTag {
			color: #fff;
			border-top-left-radius: 0.7rem;
			border-bottom-right-radius: 0.7rem;
		}
	}
	.firstBanner {
		$width: calc(1080 * 1px * 0.5);
		$height: calc(400 * 1px * 0.5);
		left: calc(50% - #{$width}/ 2);
		top: calc(50% - #{$height} / 2);
		width: $width;
		height: $height;
		transition: all ease 0.6s;
		z-index: 3;
	}
	.secondBanner {
		$width: calc(1080 * 1px * 0.4);
		$height: calc(400 * 1px * 0.4);
		left: calc(100% - #{$width});
		top: calc(#{$bannerListHeight}/ 2 - #{$height}/ 2);
		width: $width;
		height: $height;
		transition: all ease 0.6s;
		z-index: 2;
	}
	.lastBanner {
		$height: calc(400 * 1px * 0.4);
		left: 0;
		top: calc(#{$bannerListHeight}/ 2 - #{$height}/ 2);
		width: calc(1080 * 1px * 0.4);
		height: $height;
		transition: all ease 0.6s;
		z-index: 2;
	}
	.changeBannerIcon {
		background-color: rgba($color: #000000, $alpha: 0.4);
		width: 30px;
		height: 30px;
		display: none !important;
		z-index: 4;
	}
	.changeBannerIcon:first-of-type {
		left: 16px;
	}
	.changeBannerIcon:nth-of-type(2) {
		right: 16px;
	}
	&:hover {
		.changeBannerIcon {
			display: flex !important;
		}
	}
}
.swiperDot {
	padding: 3.2px;
	background-color: rgb(211, 211, 211);
}
.playOutlinedIcon {
	background-color: rgba($color: #000000, $alpha: 0.4);
	border: 1px solid rgba($color: #ffffff, $alpha: 0.5);
	width: 28px;
	height: 28px;
	.iconInner {
		transform: translate(7%, 0);
	}
}
.privateContentName {
	@include ellipsis(2);
}
.primaryTheme {
	.activeSwiperDot {
		background-color: $primary;
	}
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $primary;
	}
	.bannerTag {
		background-color: $primary;
	}
}
.darkTheme {
	.activeSwiperDot {
		background-color: $dark;
	}
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $dark;
	}
	.bannerTag {
		background-color: $dark;
	}
}
.freeTheme {
	.activeSwiperDot {
		background-color: $free;
	}
	.trigonalPlay {
		border-left: calc(12px * 0.8) solid $free;
	}
	.bannerTag {
		background-color: $free;
	}
}
</style>
